<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商户全称" prop="altMchName">
        <el-input
          v-model="queryParams.altMchName"
          placeholder="请输入商户全称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="busiContactName">
        <el-input
          v-model="queryParams.busiContactName"
          placeholder="请输入联系人姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="busiContactMobileNo">
        <el-input
          v-model="queryParams.busiContactMobileNo"
          placeholder="请输入联系人手机号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="结算方式" prop="settMode">
        <el-select v-model="queryParams.settMode" placeholder="请选择结算方式" clearable size="small">
          <el-option
                v-for="dict in dict.type.sett_mode"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
           />
        </el-select>
      </el-form-item>
      <el-form-item label="结算周期" prop="settDateType">
        <el-select v-model="queryParams.settDateType" placeholder="请选择结算周期类型" clearable size="small">
          <el-option
                v-for="dict in dict.type.sett_date_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
           />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col> 
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="accountList" @selection-change="handleSelectionChange">
      <el-table-column label="登录名" align="center" prop="loginName" />
      <el-table-column label="租户号" align="center" prop="tenantCode" />
      <el-table-column label="租户名称" align="center" prop="tenantName" />
      <el-table-column label="分账方编号" align="center" prop="altMchNo" />
      <el-table-column label="商户简称" align="center" prop="altMchShortName" />
      <el-table-column label="联系人姓名" align="center" prop="busiContactName" />
      <el-table-column label="联系人手机" align="center" prop="busiContactMobileNo" />
      <el-table-column label="法人姓名" align="center" prop="legalPerson" />
      <el-table-column label="法人手机号" align="center" prop="phoneNo" />
      <el-table-column label="汇聚状态" align="center" prop="orderStatusStr" />
      <el-table-column label="签约状态" align="center" prop="signStatusStr" />
      <el-table-column label="分账方状态" align="center" width="100">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.splitAccountStatus"
                  active-value="0"
                  inactive-value="1"
                  @change="handleStatusChange(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
      <el-table-column label="结算方式" align="center" prop="settModeStr" />
      <el-table-column label="结算周期" align="center" prop="settDateTypeStr" />
      <el-table-column label="余额" align="center" prop="balance" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改</el-button>
    <!--      <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button> -->
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                      <span class="el-dropdown-link">
                        <i class="el-icon-d-arrow-right el-icon--right"></i>更多
                      </span>
                      <el-dropdown-menu slot="dropdown">
<!--                        <el-dropdown-item v-if="scope.row.altMchNo != ''" command="handleAltMchQuery" icon="el-icon-circle-check"-->
<!--                                          >余额查询</el-dropdown-item>-->
<!--                        <el-dropdown-item v-if="scope.row.altMchNo != ''" command="handleAltMchWithdrawal" icon="el-icon-circle-check"-->
<!--                                          >余额提现</el-dropdown-item>-->
                        <el-dropdown-item v-if="scope.row.altMchNo != '' && scope.row.signStatus != 'P1000'" command="handleAltMchSign" icon="el-icon-circle-check"
                          >汇聚签约</el-dropdown-item>
                        <el-dropdown-item v-if="scope.row.altMchNo != ''" command="handleAltMchAuth" icon="el-icon-circle-check"
                          >汇聚认证</el-dropdown-item>

                      </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改分账对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-row>
            <el-col :span="12">
              <el-form-item label="分账方登录名" prop="loginName">
                <el-input v-model="form.loginName" :maxlength="50" placeholder="请输入分账方登录名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="分账方商户类型" prop="altMerchantType">
                    <el-select v-model="form.altMerchantType" placeholder="请选择分账方商户类型">
                        <el-option
                              v-for="item in dict.type.split_account_type"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            >{{item.label}}
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="分账方商户全称" prop="altMchName">
             <el-input v-model="form.altMchName" :maxlength="90" placeholder="请输入分账方商户全称" />
        </el-form-item>
        <el-form-item label="分账方商户简称" prop="altMchShortName">
          <el-input v-model="form.altMchShortName" :maxlength="30" placeholder="请输入分账方商户简称" />
        </el-form-item>
        <el-row>
            <el-col :span="12">
              <el-form-item label="业务联系人姓名" prop="busiContactName">
                        <el-input v-model="form.busiContactName" :maxlength="30" placeholder="请输入业务联系人姓名" />
                      </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="业务联系人手机" prop="busiContactMobileNo">
                          <el-input v-model="form.busiContactMobileNo" :maxlength="11" placeholder="请输入业务联系人手机" />
                </el-form-item>
            </el-col>
         </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="法人姓名" prop="legalPerson">
                          <el-input v-model="form.legalPerson" :maxlength="30" placeholder="请输入法人姓名" />
                        </el-form-item>
            </el-col>
            <el-col :span="12">
                    <el-form-item label="法人手机号" prop="phoneNo">
                      <el-input v-model="form.phoneNo" :maxlength="11" placeholder="请输入法人手机号" />
                    </el-form-item>
             </el-col>
         </el-row>
         <el-row>
              <el-col :span="12">
                          <el-form-item label="法人身份证号码" prop="idCardNo">
                                    <el-input v-model="form.idCardNo" :maxlength="20" placeholder="请输入法人身份证号码" />
                          </el-form-item>
                </el-col>
                 <el-col :span="12">
                     <el-form-item label="法人身份证有效期" prop="idCardExpiry">
                               <el-date-picker clearable size="small"
                                 v-model="form.idCardExpiry"
                                 type="date"
                                 value-format="yyyy-MM-dd"
                                 placeholder="选择法人身份证有效期">
                               </el-date-picker>
                             </el-form-item>
                </el-col>
        </el-row>
        <el-row>
             <el-col :span="12">
                  <el-form-item label="营业执照编号" prop="licenseNo">
                            <el-input v-model="form.licenseNo" placeholder="请输入营业执照编号" />
                          </el-form-item>
             </el-col>
            <el-col :span="12">
                 <el-form-item label="营业执照有效期" prop="licenseExpiry">
                          <el-date-picker clearable size="small"
                            v-model="form.licenseExpiry"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择营业执照有效期">
                          </el-date-picker>
                        </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="经营范围" prop="manageScope">
                  <el-input v-model="form.manageScope" :maxlength="300" placeholder="请输入经营范围" />
                </el-form-item>
        <el-form-item label="经营地址" prop="manageAddr">
          <el-input v-model="form.manageAddr" :maxlength="50" placeholder="请输入经营地址" />
        </el-form-item>

        <el-row>
           <el-col :span="12">
                <el-form-item label="结算方式" prop="settMode">
                          <el-select v-model="form.settMode" placeholder="请选择结算方式">
                                <el-option
                                      v-for="item in dict.type.sett_mode"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                 >{{item.label}}
                                </el-option>
                          </el-select>
               </el-form-item>
           </el-col>
          <el-col :span="12">
               <el-form-item label="结算账户类型" prop="bankAccountType">
                         <el-select v-model="form.bankAccountType" placeholder="请选择结算账户类型">
                                     <el-option
                                           v-for="item in dict.type.bank_account_type"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value"
                                      >{{item.label}}
                                      </el-option>
                       </el-select>
               </el-form-item>
          </el-col>
      </el-row>
      <el-row>
           <el-col :span="12">
                <el-form-item label="结算周期类型" prop="settDateType">
                          <el-select v-model="form.settDateType" placeholder="请选择结算周期类型">
                               <el-option
                                     v-for="item in dict.type.sett_date_type"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value"
                                >{{item.label}}
                                </el-option>
                           </el-select>
                        </el-form-item>
           </el-col>
          <el-col :span="12">
               <el-form-item label="结算周期" prop="riskDay">
                         <el-input v-model="form.riskDay" type="number" min="1" :maxlength="3" placeholder="请输入结算周期" />
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
           <el-col :span="12">
                <el-form-item label="银行账户名称" prop="bankAccountName">
                          <el-input v-model="form.bankAccountName" :maxlength="300" placeholder="请输入银行账户名称" />
                </el-form-item>
           </el-col>
          <el-col :span="12">
               <el-form-item label="银行账号" prop="bankAccountNo">
                         <el-input v-model="form.bankAccountNo" :maxlength="30" placeholder="请输入银行账号" />
               </el-form-item>
          </el-col>
      </el-row>

      <el-row>
           <el-col :span="12">
                 <el-form-item label="联行号" prop="bankChannelNo">
                          <el-input v-model="form.bankChannelNo" :maxlength="50" placeholder="请输入联行号" />
                  </el-form-item>
           </el-col>
      </el-row>

      <el-row>
                 <el-col :span="24">
                        <el-form-item label="身份证正面" prop="cardPositive">
                            <ImageUpload @on-success="cardPositiveSuccessImage" v-model="form.cardPositive" :limit="1" @on-remove="cardPositiveRemoveImage"/>
                        </el-form-item>
                 </el-col>
      </el-row>
      <el-row>
             <el-col :span="24">
                    <el-form-item label="身份证反面" prop="cardNegative">
                           <ImageUpload @on-success="cardNegativeSuccessImage" v-model="form.cardNegative" :limit="1" @on-remove="cardNegativeRemoveImage"/>
                    </el-form-item>
             </el-col>
      </el-row>


      <el-row>
         <el-col :span="24">
                <el-form-item label="营业执照" prop="tradeLicence">
                       <ImageUpload @on-success="tradeLicenceSuccessImage" v-model="form.tradeLicence" :limit="1" @on-remove="tradeLicenceRemoveImage"/>
                </el-form-item>
         </el-col>
      </el-row>
        <el-row>
             <el-col :span="24">
                    <el-form-item label="开户许可证" prop="openAccountLicence">
                          <ImageUpload @on-success="openAccountLicenceSuccessImage" v-model="form.openAccountLicence" :file-list="form.openAccountLicence" :limit="1" @on-remove="openAccountLicenceRemoveImage"/>
                    </el-form-item>
             </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" :maxlength="200" type="textarea" placeholder="请输入内容" />
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAccount, getAccount, delAccount, addAccount, updateAccount, exportAccount,changeSplitAccountStatus,sign,auth,altMchQuery,altMchWithdrawal } from "@/api/splitaccount/account"

export default {
  name: "Account",
  dicts: ['split_account_type','sett_mode','sett_date_type','bank_account_type','alt_merchant_type','account_type'],

  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 分账表格数据
      accountList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        altMchName: null,
        busiContactName: null,
        busiContactMobileNo: null,
        settMode: null,
        settDateType: null,
      },
      // 表单参数
      form: {},
      withdrawal:{},
      // 表单校验
      rules: {
          tenantCode: [
            { required: true, message: "商户号不能为空", trigger: "blur" }
          ],tenantName: [
            { required: true, message: "商户名称不能为空", trigger: "blur" }
          ],loginName: [
            { required: true, message: "分账方登录名不能为空", trigger: "blur" }
          ],altMerchantType: [
            { required: true,message: "分账方商户类型不能为空", trigger: "change" }
          ],altMchName: [
            { required: true, message: "分账方商户全称不能为空", trigger: "blur" }
          ],busiContactName: [
            { required: true, message: "业务联系人姓名不能为空", trigger: "blur" }
          ],busiContactMobileNo: [
            { required: true, message: "业务联系人手机不能为空", trigger: "blur" },
           {
             pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
             message: "请输入正确的电话",
             trigger: "blur"
           }
          ],legalPerson: [
            { required: true, message: "法人姓名不能为空", trigger: "blur" }
          ],phoneNo: [
            { required: true, message: "法人手机号不能为空", trigger: "blur" },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的电话",
              trigger: "blur"
            }
          ],idCardNo: [
            { required: true, message: "法人身份证号码不能为空", trigger: "blur" }
          ],settMode: [
            { required: true, message: "结算方式不能为空", trigger: "change"}
          ],bankAccountType: [
            { required: true, message: "结算账户类型不能为空", trigger: "change" }
          ],settDateType: [
            { required: true, message: "结算周期类型不能为空", trigger: "blur" }
          ],riskDay: [
            { required: true, message: "结算周期格式不正确", trigger: "blur" }
          ],splitAccountType: [
            { required: true, message: "分账类型不能为空", trigger: "change" }
          ],splitAccountTypeStr: [
            { required: true, message: "分账比例不正确", trigger: "blur" }
          ],bankAccountName: [
            { required: true, message: "银行账户名称不能为空", trigger: "blur" }
          ],bankAccountNo: [
            { required: true, message: "银行账号不正确", trigger: "blur" }
          ],accountType: [
            { required: true, message: "分账方类型不正确", trigger: "change" }
          ],cardPositive: [
            { required: true, message: "身份证正面不能为空", trigger: "blur" }
          ],cardNegative: [
            { required: true, message: "身份证反面不能为空", trigger: "blur" }
          ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
      // 更多操作触发
      handleCommand(command, row) {
        switch (command) {
          case "handleAltMchSign":
            this.handleAltMchSign(row);
            break;
          case "handleAltMchAuth":
            this.handleAltMchAuth(row);
            break;
          case "handleAltMchQuery":
            this.handleAltMchQuery(row);
            break;
          case "handleAltMchWithdrawal":
            this.handleAltMchWithdrawal(row);
            break;
          default:
            break;
        }
      },
      handleAltMchQuery(row){
        const altMchNo = row.altMchNo;
        this.$modal.confirm('确定要查询余额吗?').then(function() {
          return altMchQuery(altMchNo);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("余额查询成功");
        }).catch(() => {});
      },
      handleAltMchWithdrawal(row){
        const altMchNo = row.altMchNo;
        this.$modal.confirm('确定要提现余额吗?').then(function() {
          return altMchWithdrawal(altMchNo);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("余额提现成功");
        }).catch(() => {});
      },
      handleAltMchSign(row){
          const splitAccountId = row.splitAccountId;
          this.$modal.confirm('确定要执行签约操作吗?').then(function() {
              return sign(splitAccountId);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("签约成功");
          }).catch(() => {});
      },
      handleAltMchAuth(row){
          const splitAccountId = row.splitAccountId;
          this.$modal.confirm('确定要执行认证操作吗?').then(function() {
              return auth(splitAccountId);
          }).then(() => {
            this.getList();
            this.$modal.msgSuccess("认证成功");
          }).catch(() => {});
      },


      // 删除身份证正面图片
      cardPositiveRemoveImage(file) {
        this.form.cardPositive = null;
      },
      // 上传成功身份证正面回调
      cardPositiveSuccessImage(res) {
        console.log("cardPositiveSuccessImage");
        this.form.cardPositive = res.fileName;
        this.$refs['form'].validateField('cardPositive')
      },


      // 删除身份证反面图片
      cardNegativeRemoveImage(file) {
        this.form.cardNegative = null;
      },
      // 上传成功身份证反面回调
      cardNegativeSuccessImage(res) {
        this.form.cardNegative = res.fileName;
        this.$refs['form'].validateField('cardNegative')
      },


      // 删除营业执照图片
      tradeLicenceRemoveImage(file) {
        this.form.tradeLicence = null;
      },
      // 上传成功营业执照回调
      tradeLicenceSuccessImage(res) {
        this.form.tradeLicence = res.fileName;
        this.$refs['form'].validateField('tradeLicence')
      },


      // 删除开户许可证图片
      openAccountLicenceRemoveImage(file) {
        this.form.openAccountLicence = null;
      },
      // 上传成功开户许可证回调
      openAccountLicenceSuccessImage(res) {
        this.form.openAccountLicence = res.fileName;
        this.$refs['form'].validateField('openAccountLicence')
      },

    /** 查询分账列表 */
    getList() {
      this.loading = true;
      listAccount(this.queryParams).then(response => {
        this.accountList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        splitAccountId: null,
        loginName: null,
        altMchName: null,
        altMchShortName: null,
        altMerchantType: null,
        busiContactName: null,
        busiContactMobileNo: null,
        phoneNo: null,
        manageScope: null,
        manageAddr: null,
        legalPerson: null,
        idCardNo: null,
        idCardExpiry: null,
        licenseNo: null,
        licenseExpiry: null,
        settMode: null,
        settDateType: null,
        riskDay: null,
        bankAccountType: null,
        bankAccountName: null,
        bankAccountNo: null,
        bankChannelNo: null,
        altMchNo: null,
        orderStatus: null,
        authStatus: null,
        approveStatus: null,
        tenantCode: null,
        tenantName: null,
        accountType: null,
        cardPositive: null,
        cardNegative: null,
        tradeLicence: null,
        openAccountLicence: null,
        otherOne: null,
        otherTwo: null,
        splitAccountType: null,
        splitAccountStatus: null,
        splitAccountTypeStr: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.splitAccountId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加分账";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const splitAccountId = row.splitAccountId || this.ids
      getAccount(splitAccountId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改分账";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.splitAccountId != null) {
            updateAccount(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addAccount(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const splitAccountIds = row.splitAccountId || this.ids;
      this.$modal.confirm('是否确认删除分账编号为"' + splitAccountIds + '"的数据项？').then(function() {
        return delAccount(splitAccountIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有分账数据项？').then(() => {
        this.exportLoading = true;
        return exportAccount(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.splitAccountStatus === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要"' + text + '""' + row.tenantName + '"分账方吗？').then(function() {
        return changeSplitAccountStatus(row.splitAccountId, row.splitAccountStatus);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.splitAccountStatus = row.splitAccountStatus === "0" ? "1" : "0";
      });
    },
  }
};
</script>
<style scoped lang="scss">
.el-upload .el-upload--picture-card {
    width: 248px;
}

</style>
